<template>
    <div class="goodsinfo-container">

        <!--小球  半场动画使用钩子函数-->
        <transition move="out-in"
                @before-enter="beforeEnter"
                @enter="enter"
                @after-enter="afterEnter">
            <div class="ball" v-show="ballFlag" ref="ball"></div>
        </transition>

        <!--轮播图-->
        <swiper :list="lunbotulist" :isfull="false"></swiper>

        <!--商品购买区域-->
        <div class="mui-card">
            <div class="mui-card-header">{{goodsinfo.title}}</div>
            <div class="mui-card-content">

                <div class="mui-card-content-inner">

                    <p class="price">
                       市场价: <del>{{goodsinfo.price_old}}</del>&nbsp;&nbsp;销售价：<span class="now_price">{{goodsinfo.price_now}}</span>
                    </p>
                    <p id="BuyNum">购买数量：
                    <numbox :max="goodsinfo.max" ref="numbox" @getCount="getSelectedCount"></numbox>
                    </p>
                    <p>
                        <mt-button type="primary" size="small">立即购买</mt-button>
                        <mt-button type="danger" size="small" @click="Addtoshopcar">加入购物车</mt-button>
                    </p>
                </div>
            </div>
        </div>

        <!--商品参数区域-->
        <div class="mui-card">
            <div class="mui-card-header">商品参数</div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <p>商品货号：</p>
                    <p>库存情况：{{goodsinfo.max}}件</p>
                    <p>上架时间：</p>
                </div>
            </div>
            <div class="mui-card-footer">
                <mt-button type="primary" size="large" plain @click="goDesc(goodsinfo.id)">图文介绍</mt-button>
                <mt-button type="danger" size="large" plain @click="goComments(goodsinfo.id)">商品评论</mt-button>
            </div>
        </div>
    </div>
    <!--问题1：从购物车返回到商品详情页面，商品数量可以超过最大值max-->

</template>

<script>
    import swiper from '../subcomponents/swiper.vue'
    import numbox from "../subcomponents/goodsinfo_numbox.vue";
    export default {
        name: "goodsinfo",
        data(){
            return {
                lunbotulist:[],
                test:0,
                num:5,
                goodsinfo:{},
                //小球显隐
                ballFlag:false,
                //节流参数
                lastTime: 0,
                selectedCount:1,
            }
        },
        created(){
            this.getLunbotu();
            this.getGoodsInfo();
        },
        mounted(){
            //设置了min-height的div 会导致offsetHeight=min-height
//             document.getElementsByClassName('ball')[0].style.top=306+document.getElementsByClassName('mui-card-header')[0].offsetHeight+'px'
// console.log(this.$refs.header.offsetHeight+'``````'+document.getElementsByClassName('mui-card')[0].offsetHeight)
        },
        methods:{
            //获取轮播图
            getLunbotu(){
            this.$http.get('/api/goodslist').then(res=>{
                this.lunbotulist=res.body.lunbotu;
            })
            },
            //获取商品列表
            getGoodsInfo(){
                this.$http.get('/api/goodslist').then(res=>{
                    let id=this.$route.params.id;
                    //第id个信息的max----剩余商品数
                    this.goodsinfo=res.body.data[id-1];
                })
            },
            //跳转图文介绍
            goDesc(id){
                this.$router.push({name:'goodsdesc',params:id})
            },
            goComments(id){//
                this.$router.push({name:'goodscomments',params:id})
            },
            Addtoshopcar() {//添加到购物车
                let nowTime = new Date().getTime();
                //间隔1.1S才能触发一次
                if (nowTime - this.lastTime > 700) {
                    this.ballFlag = true;
                    //使用vuex添加到购物车，拼接一个要保存到store的state.car数组里
                    var goodsinfo={id:this.$route.params.id,count:this.selectedCount,price:this.goodsinfo.price_now,selected:true}
                    this.$store.commit('addToCar',goodsinfo);

                    this.lastTime= nowTime;
                }
            },
            beforeEnter(e){//动画开始前
                e.style.transform="translate(0,0)";
                //设置小球动画开始前的位置与numbox一致
                const numboxPosition=document.getElementsByClassName('mui-input-numbox')[0].getBoundingClientRect();
                this.$refs.ball.style.top=numboxPosition.top+'px';
                this.$refs.ball.style.left=numboxPosition.left+'px';
            },
            enter(e,done){//enter、leave必须使用done，否则将被同步调用，过渡会立即完成

                // 触发重排重绘
                e.offsetWidth;
                //小球动画需要适配
                //获取小球的位置,getBoundingClientRect()方法获取一组矩形位置：rect 是一个具有四个属性left、top、right、bottom的DOMRect对象
                const ballPosition=this.$refs.ball.getBoundingClientRect();
                const badgePosition=document.getElementById('badge').getBoundingClientRect();

                const xDist=badgePosition.left-ballPosition.left;
                const yDist=badgePosition.top-ballPosition.top;
                e.style.transform=`translate(${xDist}px,${yDist}px)`;
                e.style.transition="all 0.6s cubic-bezier(.1,-0.3,1,.68)";
                done();


            },
            afterEnter(e){
                this.ballFlag=false
            },
            //父组件传给numbox子组件的函数
            getSelectedCount(count){
                //子组件的count赋给selectedcount
                if(count>this.goodsinfo.max){
                    this.selectedCount=this.goodsinfo.max;
                }else if(count<1){
                    this.selectedCount=1;
                }
                else{
                    this.selectedCount=count;
                }
            },
        },
        components:{
            swiper,
            numbox
        }
    }
</script>

<style lang="scss" scoped>
    .goodsinfo-container {
        background-color: #eee;
        /*触发BFC防止塌陷*/
        display: inline-block;
        width: 100%;
    }

    p:nth-child(2) {
        display: inline-block;
        position: relative;
    }

    .mui-numbox {
        display: inline-block;
    }

    del {
        font-size: 12px;
    }

    .now_price {
        color: red;
        font-size: 16px;
    }
    .mui-card-footer{
        display: block;
        button{
            margin: 15px 0;
        }
    }
    .ball{
        width: 15px;
        height: 15px;
        border-radius:50%;
        background-color:red;
        z-index: 1000;
        position: absolute;
        /*left:9em;*/
        /*top:21em;*/

    }


</style>